<!--
 * @Description: 机器人类型侧边
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2022-03-29 14:01:03
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="form" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="display_name">
                    <el-input v-model="form.display_name" clearable></el-input>
                </el-form-item>
                <el-form-item label="父级菜单">
                    <el-cascader class="input-full" placeholder="" clearable v-model="form.parent_id" :options="tree"
                        :props="{ checkStrictly: true }" @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="地址" prop="route">
                    <el-input v-model="form.route" clearable></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="form.icon" clearable></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
            <el-button @click="onDelete" type="warning" size="small">删除</el-button>
        </div>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData", "data", "tree"],
        data() {
            return {
                rules: {
                    display_name: [{
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "blur"
                    }],
                    route: [{
                        required: true,
                        message: "请输入地址",
                        trigger: "blur"
                    }]
                },
                form: {
                    id: '',
                    display_name: '',
                    name: '',
                    remark: '',
                    route: "",
                    icon: "",
                    sort: 0,
                    parent_id: 1
                }
            }
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData);
                }
            }
        },
        mounted() {
            this.clearData();
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData)
            }
        },
        methods: {
            handleChange(a) {
                this.form.parent_id = a.length ? a[a.length - 1] : ""
            },
            onSubmit() {
                if (this.form.display_name) {
                    if (this.form.route!=="") {
                        if (this.form.id!=="") {
                            this.update()
                        } else {
                            this.add()
                        }
                    } else {
                        this.$message({
                            type: "warning",
                            message: "地址必须填写"
                        })
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: "菜单名称必须填写"
                    })
                }
            },
            add() {
                this.$ajax("post", "/api/admin/menus", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            update() {
                this.$ajax("put", "/api/admin/menus/" + this.form.id, this.form, data => {
                    if (data.code == 200) {
                        this.clearData()
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            onDelete() {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "delete", "/api/admin/menus/" + this.form.id, {
                        },
                            data => {
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.closeBox()
                            }
                        );
                    })
                    .catch(() => {
                        this.$message({
                            type: "success",
                            message: "已取消删除"
                        })
                    })
            },
            closeBox() {
                this.$parent.$parent.$parent.show = false
                this.$parent.$parent.$parent.getData()
            },
            clearData() {
                this.form = {
                    id: '',
                    display_name: '',
                    name: '',
                    remark: '',
                    route: "",
                    icon: "",
                    sort: 0,
                    parent_id: 0
                }
            }
        }
    }
</script>